<template>
  <h1 style="margin: 20px">添加患者</h1>
  <div class="operation_panel">
    <el-button type="primary" :icon="Plus" @click="showAddDialog">添加新数据</el-button>
  </div>
  <!-- 添加新数据对话框 -->
  <!-- 模态框 -->
  <el-dialog v-model="dialogFormVisible2" title="言㐱陪诊" width="500">
    <el-form :model="form" :rules="rules2" ref="formRef" label-position="right" label-width="auto">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="form.sex" autocomplete="off" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactNumber">
        <el-input v-model="form.contactNumber" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取消</el-button>
        <el-button v-if="!isEdit2" type="primary" @click="handleAdd2">新增</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { Delete, Plus } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  computed: {
    Plus() {
      return Plus
    }
  },
  components: { Delete, Plus },
  data() {
    return {
      currentPage: 1,
      pageSize: 20,
      dialogFormVisible2: true,
      isEdit2: false,
      searchQuery: "", // 搜索框内容
      form: {
        name: '',
        age: 0,
        sex: '',
        contactNumber: '',
      },
      rules2: {
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {type: 'number', message: '年龄必须为数字值', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请输入性别', trigger: 'blur'}
        ],
        contactNumber: [
          {required: true, message: '请输入联系电话', trigger: 'blur'}
        ]
      }
    };
  },
  created() {
  },
  methods: {
    // 2. 添加新数据
    async handleAdd2() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.form);
            const res = await axios.post('/api/wu_vue_2_test/Patient/add', this.form);
            console.log(res);
            this.dialogFormVisible2 = false;
            await this.getTableData();
            this.showMsg(res);
          } catch (error) {
            console.error('添加数据失败,被占用或网络不佳:', error);
            ElMessage({
              message: '添加数据失败,被占用或网络不佳，请稍后重试',
              type: 'error',
              plain: true
            });
          }
        } else {
          console.log('表单验证不通过');
          return false;
        }
      });
    },
    // 显示添加新数据对话框
    showAddDialog() {
      this.isEdit2 = false;
      this.dialogFormVisible2 = true;
      this.resetForm();
    },
    // 重置表单
    resetForm() {
      this.form = {
        name: '',
        age: 0,
        sex: '',
        contactNumber: ''
      };
    },
    // 显示操作结果消息
    showMsg(res) {
      if (res.data.code === 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
          plain: true
        });
      } else {
        ElMessage({
          message: res.data.msg,
          type: 'error',
          plain: true
        });
      }
    }
  }
};
</script>

<style scoped>
h1 {
  color: #191919;
}

.operation_panel {
  margin-bottom: 16px;
}

.el-pagination {
  margin-top: 16px;
}
</style>